<template>
  <div class="tinymce-box">
    <Editor id="myedit" v-model="content" :init="init" tag-name="div" :disabled="disabled" @click="onClick"
      @dblclick.stop="onDbclick" />
  </div>
</template>

<script>
// import api from '../api/api.js'
import $ from "jquery";

//引入tinymce编辑器
import Editor from "@tinymce/tinymce-vue";

//引入方式引入node_modules里的tinymce相关文件文件
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入则不显示编辑器
import "tinymce/themes/silver"; //编辑器主题，不引入则报错
import "tinymce/icons/default"; //引入编辑器图标icon，不引入则不显示对应图标

// 引入编辑器插件
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/anchor"; //锚点
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/autoresize"; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import "tinymce/plugins/autosave"; //自动存稿
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //编辑源码
import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/directionality"; //文字方向
import "tinymce/plugins/emoticons"; //表情
import "tinymce/plugins/fullpage"; //文档属性
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
import "tinymce/plugins/hr"; //水平分割线
import "tinymce/plugins/image"; //插入编辑图片
import "tinymce/plugins/importcss"; //引入css
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/pagebreak"; //插入分页符
import "tinymce/plugins/paste"; //粘贴插件
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/print"; //打印
import "tinymce/plugins/quickbars"; //快速工具栏
import "tinymce/plugins/save"; //保存
import "tinymce/plugins/searchreplace"; //查找替换
// import 'tinymce/plugins/spellchecker'  //拼写检查，暂未加入汉化，不建议使用
import "tinymce/plugins/tabfocus"; //切入切出，按tab键切出编辑器，切入页面其他输入框中
import "tinymce/plugins/table"; //表格
import "tinymce/plugins/template"; //内容模板
import "tinymce/plugins/textcolor"; //文字颜色
import "tinymce/plugins/textpattern"; //快速排版
import "tinymce/plugins/toc"; //目录生成器
import "tinymce/plugins/visualblocks"; //显示元素范围
import "tinymce/plugins/visualchars"; //显示不可见字符
import "tinymce/plugins/wordcount"; //字数统计
import { onMounted } from "@vue/runtime-core";
import { nextTick, ref, watch } from "vue";
import bus from "@/utils/eventBus";
export default {
  name: "TEditor",
  components: {
    Editor,
  },
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        "childTr makeEditable childTd fixedHead fixedFoot childWrite componentType addJcxm resultValue isRowavg isRowsum limitPointCount required hlValue print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave save table",
    },
    toolbar: {
      type: [String, Array],
      default:
        "editor-save editor-return fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
                styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                image media charmap emoticons hr pagebreak insertdatetime print preview | code selectall | indent2em lineheight formatpainter axupimgs | \
                table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol",
    },
    height: {
      type: Number,
      default: 500,
    },
  },
  emits: { "update:modelValue": null },
  setup(props, context) {
    const init = {
      language_url: "/tinymce/langs/zh_CN.js", //引入语言包文件
      language: "zh_CN", //语言类型
      skin_url: "/tinymce/skins/ui/oxide", //皮肤：浅色
      // skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤：暗色
      plugins: props.plugins, //插件配置
      external_plugins: {
        powerpaste: "/tinymce/plugins/powerpaste/plugin.js",
        childTr: "/tinymce/plugins/childTr/plugin.js",
        makeEditable: "/tinymce/plugins/makeEditable/plugin.js",
        childTd: "/tinymce/plugins/childTd/plugin.js",
        fixedHead: "/tinymce/plugins/fixedHead/plugin.js",
        fixedFoot: "/tinymce/plugins/fixedFoot/plugin.js",
        componentType: "/tinymce/plugins/componentType/plugin.js",
        addJcxm: "/tinymce/plugins/addJcxm/plugin.js",
        childWrite: "/tinymce/plugins/childWrite/plugin.js",
        resultValue: "/tinymce/plugins/resultValue/plugin.js",
        isRowavg: "/tinymce/plugins/isRowavg/plugin.js",
        isRowsum: "/tinymce/plugins/isRowsum/plugin.js",
        limitPointCount: "/tinymce/plugins/limitPointCount/plugin.js",
        required: "/tinymce/plugins/required/plugin.js",
        hlValue: "/tinymce/plugins/hlValue/plugin.js",
      },
      toolbar: props.toolbar, //工具栏配置，设为false则隐藏
      toolbar_mode: "sliding",
      remove_trailing_brs: true,//删除块元素末尾的<br>
      autosave_ask_before_unload: true,
      contextmenu: 'custom fixedHead fixedFoot childTr makeEditable childTd childWrite resultValue isRowavg isRowsum required limitPointCount hlValue componentType addJcxm bold copy link image imagetools table configurepermanentpen',
      menubar: "file edit insert view format table tools", //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
      menu: {
        // file: { title: '文件', items: 'newdocument' },
        edit: {
          title: "编辑",
          items: "undo redo | cut copy paste pastetext | selectall",
        },
        insert: { title: "插入", items: "link image  |  hr" },
        view: { title: "查看", items: "visualaid" },
        // format: {
        //   title: '格式',
        //   items:
        //     'bold italic underline strikethrough superscript subscript | formats | removeformat',
        // },
        // table: { title: '表格', items: 'inserttable tableprops deletetable | cell row column' },
        // tools: { title: '工具', items: 'spellchecker code' },
      },
      fontsize_formats:
        "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
      font_formats:
        "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",

      height: props.height, //注：引入autoresize插件时，此属性失效
      placeholder: "在这里输入文字",
      branding: false, //tiny技术支持信息是否显示
      resize: 'both', //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
      statusbar: false, //最下方的元素路径和字数统计那一栏是否显示
      elementpath: false, //元素路径是否显示
      extended_valid_elements: "td[*]",
      content_style:
        "img {max-width:100%;} tr.childTr{ background-color: #d8fdde;} td.childTd{ background-color: #d8fdde;} td.addJcxm{ background-color: #ffa5ff;} tr.fixed-head{ background-color: #e5e5e5;} tr.fixed-foot{ background-color: #e5e5e5;} tr.child-write{ background-color: #4f836a;} td.resultValue{background-color:#db797999} td.isRowavg{background-color:#67c23a} td.isRowsum{background-color:blue} td.limitPointCount{background-color:#c18989} td.required{background-color:#c18989} td.hlValue{color:blue} td.selected{background-color:rgba(180,215,255,.7);outline:3px solid #b4d7ff}", //直接自定义可编辑区域的css样式
      // content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入

      // images_upload_url: '/demo/upimg.php',  //后端处理程序的url
      // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
      // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
      // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
      images_upload_handler: (blobInfo, success, failure) => {
        const img = "data:image/jpeg;base64," + blobInfo.base64();
        success(img);
      },
      height: document.documentElement.clientHeight - 84 - 22,
      min_height: document.documentElement.clientHeight - 84 - 22,
      max_height: document.documentElement.clientHeight - 84 - 22,
      setup: function (editor) {
        editor.on('keyup', function (e) {
          if (e.key == "Delete" || e.key == "Backspace") {
            bus.emit("deleteComponent");
          }
        });
        editor.ui.registry.addButton("editor-preivew", {
          text: "预览",
          onAction: function () {
            isDisabled.value = true;
            setTimeout(() => {
              myrefs.value.changedDialogVisible(true);
              myrefs.value.setData(tinymce.activeEditor.getContent());
            }, 500);
            isDisabled.value = false;
          },
        });
        editor.ui.registry.addButton("editor-save", {
          text: "保存",
          onAction: function () {
            bus.emit("saveTransfer");
          },
        });
        editor.ui.registry.addButton("editor-return", {
          text: "返回",
          onAction: function () {
            bus.emit("returnListPage");
          },
        });
      },
      childTrCallBack: function (editor, trObject) {
        bus.emit("childTrCallBack", trObject);
      },
      remvoeChildTrCallBack: function (editor, trObject) {
        bus.emit("remvoeChildTrCallBack", trObject);
      },
      makeEditableCallBack: function (editor, tdObject) {
        bus.emit("makeEditableCallBack", tdObject);
      },
      removeMakeEditableCallBack: function (editor, tdObject) {
        bus.emit("removeMakeEditableCallBack", tdObject);
      },
      childTdCallBack: function (editor, tdObject) {
        bus.emit("childTdCallBack", tdObject);
      },
      updateComponentType: function (editor, tdObject) {
        bus.emit("updateComponentType", tdObject);
      },
      addJcxmCallBack: function (editor, tdObject) {
        bus.emit("addJcxmCallBack", tdObject);
      },
      updateFixedHead: function (editor, trObject) {
        bus.emit("updateFixedHead", trObject);
      },
      updateFixedFoot: function (editor, trObject) {
        bus.emit("updateFixedFoot", trObject);
      },
      updateChildWrite: function (editor, trObject) {
        bus.emit("updateChildWrite", trObject);
      },
      updateResultValue: function (editor, tdObject) {
        bus.emit("updateResultValue", tdObject);
      },
      updateIsRowavg: function (editor, tdObject) {
        bus.emit("updateIsRowavg", tdObject);
      },
      updateIsRowsum: function (editor, tdObject) {
        bus.emit("updateIsRowsum", tdObject);
      },
      updateLimitPointCount: function (editor, tdObject) {
        bus.emit("updateLimitPointCount", tdObject);
      },
      updateRequired: function (editor, tdObject) {
        bus.emit("updateRequired", tdObject);
      },
      updateHlValue: function (editor, tdObject) {
        bus.emit("updateHlValue", tdObject);
      },
      init_instance_callback: function (editor) {
        console.log("ID为: " + editor.id + " 的编辑器已初始化完成.");
        bus.emit("initEditorCallBack", editor);
      }
    };
    tinymce.init; // 初始化

    const revert_data = (content) => {
    };
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    function onClick(e) {
      bus.emit('editorClick', e, tinymce);
    }

    function onDbclick(e) {
      bus.emit('editorDbClick', e, tinymce);
    }

    // 可以添加一些自己的自定义事件，如清空内容
    function clear() {
      content.value = "";
    }
    const setEditMode = (type) => {
      tinymce.editors["myedit"].setMode(type); //开启只读模式
    };
    const content = ref(props.modelValue);
    const conentIsUpate = ref(false)
    watch(
      () => props.modelValue,
      (initInfo, prevInitInfo) => {
        content.value = props.modelValue;
      }
    );
    watch(
      () => content.value,
      (initInfo, prevInitInfo) => {
        if (prevInitInfo.length > 0) {
          conentIsUpate.value = true;
        }
        revert_data(content);
      }
    );

    function getHeight() {
      try {
        document.getElementsByClassName("tox-tinymce")[0].style.height = document.documentElement.clientHeight - 84 - 22 + "px"
      } catch (e) { }
    }
    onMounted(() => {
      window.addEventListener("resize", getHeight);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", getHeight);
    });
    return {
      content,
      init,
      revert_data,
      onClick,
      onDbclick,
      clear,
      setEditMode,
      tinymce,
      // contentValue: this.value,
    };
  },
  // data() {
  //   return {
  //     content: this.modelValue,
  //   };
  // },

  mounted() { },
  // watch: {
  //   content() {
  //     this.revert_data(this.content);
  //   },
  // },
};
</script>
